<template>
	<!-- D:/project/app/ydz-app-uniapp/static/images/login -->
	<view class="pagebody" :style="{ minheight: maxHeight }">
		<view class="topbgbox">
			<view class="justify-between align-center">
				<image @click="backpage" src="@/static/images/login/leftjt.png" alt="" style="width: 48rpx;height: 48rpx;"></image>

			</view>
			<view class="color303b39 fwbold" style="font-size: 60rpx;margin-top: 64rpx;margin-left: 23rpx;">
				请输入验证码
			</view>
			<view class="color303b39 fz32" style="margin-top: 32rpx;margin-left: 23rpx;">
				欢迎来到药队长!
			</view>
			<view class="fz28 flex-row align-center" style="margin-top: 100rpx;">
				<span style="color: #576260;margin-right: 24rpx;">验证码已发送至</span>
			</view>
			<view class="fz28 flex-row color303b39 align-center justify-between" style="margin-top: 32rpx;">
				<span>+86 {{phone}}</span>
				<view v-if="isCountingDown" class="">
					{{countDown}}秒后重发
				</view>
				<view style="color: #00D9B2;" v-else @click="getSmsCode">
					获取验证码
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />


		<!-- 验证码输入框 -->
<!-- 		<view class="phone_code">
			<view class="phone_code_single">
				<input ref="codeInput" style="left: 0;" class="phone_code_single_cinput" adjust-position="false" auto-blur="true" @blur="codeNumBlurFun"
					@input="codeNumInputFun" :focus="focus" v-model="code" type="number" maxlength="6" />
				<view class="phone_code_single_codeinput">
					<view class="codebox" v-for="(item,index) in 6" :key="index" @click="codefocusFun(index)"
						:style="(index == code.length? 'background-color:#E5FEF9;':'color: #313131;background-color:#eee')">
						{{code[index]}}
					</view>
				</view>
			</view>
		</view> -->
		<view class="phone_code justify-center">
			<yi-code  ref="code" :focus="true" inputType="number"  @onComplete="complete" @onChange="change" :maxlength="6" type="line"></yi-code>
		</view>

		<u-toast ref="uToast" />

	</view>
</template>

<script>
	import {
		sendSmsCode,
		checkSmsCode,
		phoneLogin
	} from '@/api/login.js'
	import store from "@/store"
	export default {
		onLoad(option) {
			// 获得屏幕最大高度
			let systemInfo = uni.getSystemInfoSync();
			this.maxHeight = systemInfo.windowHeight + "px";
			console.log(option)
			this.phone = option.phone
			this.type = option.type
			this.operateId = option.operateId
			store.commit("other/SET_PHONE", this.phone)
			console.log(store.state.other.phone)
			// 发请求获取验证码并打开倒计时
			this.getSmsCode()
		},
		data() {
			return {
				maxHeight: '',
				phone: '',
				type:'',
				isCountingDown: false, // 是否正在倒计时
				countDown: 60, // 倒计时秒数
				countDownTimer: null, //计时器
				codeid:null,
				operateId:null,

				// 验证码
				timer: null, // 定时器
				count: 60, // 时间
				code: "", // 验证码  
				focus: true, // 焦点
				isCode: true // ‘确定’按钮是否禁用
			}
		},
		methods: {
			// yi-code
			            onClear(){
			                this.$refs.code.clear() 
			            },
			            complete(code){
			                console.log(`complete:${code}`);
							let data = {
								id:this.codeid,
								phone:this.phone,
								code:code
							}
							checkSmsCode(data).then(res=>{
								if(res.data==true){
									this.$refs.uToast.show({
										title: res.msg,
									})
									if(this.type=='phonelogin'){
										this.$modal.loading("登录中，请耐心等待...")
										this.$store.dispatch('phoneLogin', data).then(() => {
										  this.$modal.closeLoading()
										  this.loginSuccess()
										}).catch(() => {
										  if (this.captchaEnabled) {
										    this.getCode()
										  }
										})
										// uni.navigateTo({
										// 	url: '/pages/login/otherlogin',
										// 	animationType: 'pop-in',
										// 	animationDuration: 200
										// })
									}else if(this.type=='forget'){
										uni.navigateTo({
											url: '/pages/login/password?type=forget',
											animationType: 'pop-in',
											animationDuration: 200
										})
									}else{
										uni.navigateTo({
											url: '/pages/login/password?type=register',
											animationType: 'pop-in',
											animationDuration: 200
										})
									}
								}else{
									this.$refs.uToast.show({
										title: res.msg,
									})
									return
								}
							
							})
			            },
			            change(code){
			                console.log(`change:${code}`);
							
							if(code.length>6){
								 this.$refs.code.clear() 
								
							}
			            },
			
			
			
			
			backpage() {
				uni.navigateBack({
				    delta: 1
				});
			},
			getSmsCode() {
				// 发送请求后提示"正在获取验证码"打开倒计时
				if (this.phone) {
					uni.showLoading({
						title: '正在获取验证码'
					})
					let data = {
						phone:this.phone,
						operateId:this.operateId
					}
					sendSmsCode(data).then(res=>{
						this.codeid = res.data
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						this.$u.toast('验证码已发送');
						// 开启计时器
						this.startCountDown();
					})
					// setTimeout(() => {
					// 	uni.hideLoading();
					// 	// 这里此提示会被this.start()方法中的提示覆盖
					// 	this.$u.toast('验证码已发送');
					// 	// 开启计时器
					// 	this.startCountDown();

					// }, 2000);
				}
			},
			// 开启倒计时
			startCountDown() {
				this.isCountingDown = true;
				this.countDown = 60;

				this.countDownTimer = setInterval(() => {
					this.countDown--;
					if (this.countDown <= 0) {
						this.resetCountDown();
					}
				}, 1000);
			},
			// 重置倒计时
			resetCountDown() {
				clearInterval(this.countDownTimer);
				this.isCountingDown = false;
				this.countDown = 60;
			},


			/**
			 * AUTHOR: 单乘风
			 * DESC: 输入框输入事件 
			 * */
			codeNumInputFun(e) {
				let val = e.detail.value
				this.code = val
				console.log(this.code)
				if (val.length == 6) {
					this.isCode = false
					console.log('验证输入的是否正确')
					let data = {
						id:this.codeid,
						phone:this.phone,
						code:this.code
					}
					checkSmsCode(data).then(res=>{
						if(res.data==true){
							this.$refs.uToast.show({
								title: res.msg,
							})
							if(this.type=='phonelogin'){
								this.$modal.loading("登录中，请耐心等待...")
								this.$store.dispatch('phoneLogin', data).then(() => {
								  this.$modal.closeLoading()
								  this.loginSuccess()
								}).catch(() => {
								  if (this.captchaEnabled) {
								    this.getCode()
								  }
								})
								// uni.navigateTo({
								// 	url: '/pages/login/otherlogin',
								// 	animationType: 'pop-in',
								// 	animationDuration: 200
								// })
							}else if(this.type=='forget'){
								uni.navigateTo({
									url: '/pages/login/password?type=forget',
									animationType: 'pop-in',
									animationDuration: 200
								})
							}else{
								uni.navigateTo({
									url: '/pages/login/password?type=register',
									animationType: 'pop-in',
									animationDuration: 200
								})
							}
						}else{
							this.$refs.uToast.show({
								title: res.msg,
							})
							return
						}

					})
				} else {
					this.isCode = true
				}
			},
			/**
			 * AUTHOR: 单乘风
			 * DESC: 输入框失去焦点事件 
			 * */
			codeNumBlurFun(e) {
				let val = e.detail.value

				this.focus = false
				if (val.length == 6) this.isCode = false
				else this.isCode = true
			},
			/**
			 * AUTHOR: 单乘风
			 * DESC: 输入框点击事件
			 * @param {Number} index 当前点击框索引
			 * */
			codefocusFun(index) {
				this.focus = true
				    this.$nextTick(() => {
				      const input = this.$refs.codeInput;
					  console.log(input)
				      if (input && input.focus) {
						console.log(input.focus)
				        input.focus();
				        // 如果是 uni-app 的 input 组件，可能需要使用 setTimeout
				        setTimeout(() => {
				          input.setSelectionRange(this.code.length, this.code.length);
				        }, 10);
				      } else {
				        console.warn("input is not a native DOM element");
				      }
				    });
			},

			// 登录成功后，处理函数
			loginSuccess(result) {
			  // 设置用户信息
			  this.$store.dispatch('GetInfo').then(res => {
				  console.log(res)
				  if(res.userDocument){
					  this.$tab.reLaunch('/pages/home')
				  }else{
					  this.$tab.reLaunch('/pages/login/setarea')
				  }
			  })
			},






		},
		beforeDestroy() {
			// 确保在组件销毁时清除计时器
			clearInterval(this.countDownTimer);
		}

	};
</script>

<style lang="scss" scoped>
	page {
		background: #fff;
	}
	::v-deep .yi-code-show-active {
		border-color: #00D9B2 !important;
	}
	::v-deep .yi-code-show-item {
		font-size: 32rpx !important;
		font-weight: bold;
	}
	

	::v-deep .is-input-border {
		border: none;
	}

	::v-deep .uni-easyinput__content {
		background: transparent !important;
	}

	::v-deep .uni-input-input {
		font-size: 32rpx;
	}

	::v-deep uni-checkbox .uni-checkbox-input {
		background: transparent;
	}

	::v-deep uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
		color: #fff;
		border-color: #00D9B2;
		background: #00D9B2;
	}

	::v-deep .uni-icons {
		font-size: 52rpx !important;
	}

	::v-deep uni-toast {
		font-size: 24rpx;
	}

	.pagebody {
		box-sizing: border-box;
		background-image: url('/static/images/login/otherbg.png');
		position: relative;
		background-repeat: no-repeat;
		background-size: cover;

		.topbgbox {
			// position: relative;
			// height: 9.2100rpx;
			box-sizing: border-box;
			padding: 14rpx 40rpx 0;


			.inputbox {
				border-bottom: 1px solid #B8C3C1;
				padding-bottom: 10rpx;
			}


		}

	}





	// 验证码

	.phone_code {
		margin-top: 56rpx;

		.phone_code_single_codeinput>uni-view {
			background: transparent !important;
			width: 82rpx;
			height: 72rpx;
			border-radius: 0;
			border-bottom: 1px solid #B8C3C1;
			font-size: 56rpx;
			font-weight: bold;
		}
	}

	.phone_code_single_codeinput {
		// background: yellow;
		display: flex;
		justify-content: center;
	}

	.phone {
		background-color: #FFF;
		width: 100vw;
		height: 100vh;

		&_code {
			padding: 30rpx;

			&_label {
				font-size: 30rpx;
				color: #999;
			}

			&_count {
				margin-top: 30rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				height: 100rpx;

				&_new {
					color: #e64340;
					font-size: 38rpx;
					font-weight: bold;
				}

				&_down {
					border: 1rpx solid #eee;
					border-radius: 10rpx;
					color: #999;
					height: 60rpx;
					line-height: 60rpx;
					padding: 0 20rpx;

					text {
						margin-left: 10rpx;
					}
				}
			}

			&_single {
				margin-top: 30rpx;

				&_cinput {
					position: fixed;
					left: -100rpx;
					width: 50rpx;
					height: 50rpx;
				}

				&_codeinput {
					margin: auto;
					width: 650rpx;
					height: 100rpx;
					display: flex;
				}

				&_codeinput>view {
					margin-top: 5rpx;
					margin-left: 15rpx;
					width: 86rpx;
					height: 86rpx;
					line-height: 86rpx;
					font-size: 60rpx;
					font-weight: bold;
					color: #313131;
					text-align: center;
					border-radius: 10rpx;
				}

				&_codeinput>view:nth-child(1) {
					margin-left: 0rpx;
				}
			}
		}
	}
</style>